@import "../../../css/struct/variables";
$color-primary: #992529;
$bg-primary: #F2E3E4;
$border-gray: #ccc;

.bg1{
    background: #fff;
}
.logo{
    margin-top: 10%;
    margin-bottom: 10%;
    text-align: center;
    display: block;
}
.logo img{
    max-width: 75%;
}
.banner{
    img{
       width: 100%
    }
}
.btn, input, select, textarea, .list-theme{
    border-radius: 4px;
}
.txt-icon-left{
    padding-left: 45px;
    background-position: 12px center;
}
.icon-username{
    margin-bottom: 15px;
    background-image: url("../../../images/brilliance/icon-username.png");
}
.icon-password{
    margin-bottom: 10px;
    background-image: url("../../../images/brilliance/icon-password.png");
}
.forgot-password{
    text-align: right;
    margin-bottom: 20px;
    text-decoration: underline;
}
.btn-theme{
    color: #fff;
    background-color: $color-primary;
}
.modal-body{
    background-color: #fff;
}
.modal-content{
    padding: 20px;
}
.modal-container .btn-close{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    background: url("../../../images/brilliance/btn-close.png") no-repeat left bottom;
    -webkit-background-size: 80%;
    background-size: 80%;
}
.validate-control{
    position: relative;
    .btn-send{
        color: $color-primary;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        min-width: 50px;
        height: 25px;
        line-height: 25px;
        margin: auto;
        padding: 0 10px;
        border-radius: 0;
        border-left: 1px solid $border-color;
        &:disabled{
            color: $gray;
            background: transparent;
        }
    }
}
.text-theme{
    color: $color-primary;
}
.user-avatar{
    border: none;
    display: inline-block;
    vertical-align: middle;
}
.list-theme{
    border: 1px solid $border-color;
    & > li:not(:last-child){
        border-bottom: 1px dashed $border-color;
    }
}
.checkbox, .radio{
    .icon{
        color: $color-primary;
    }
}
.timer{
    font-size: 0;
    word-spacing: 0;
    letter-spacing: 0;
}
.timer > li{
    font-size: 30px;
    line-height: normal;
    word-spacing: normal;
    letter-spacing: normal;
    color: $color-primary;
    margin: 0 2px;
    padding: 0 5px;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    &:not(.colon){
        border: 1px solid $color-primary;
        background-color: $bg-primary;
        box-shadow: 1px 1px 1px rgb(202,187,188);
    }
    &:not(.colon):before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-top: 2px solid rgba(255,255,255,0.5);
        border-left: 2px solid rgba(255,255,255,0.5);
        border-right: 2px solid rgba(0,0,0,0.1);
        border-bottom: 2px solid rgba(0,0,0,0.1);
        border-radius: 4px;
        box-sizing: border-box;
    }
    &.colon{
        &:before, &:after{
            content: '';
            border: 1px solid $color-primary;
            display: block;
            width: 4px;
            height: 4px;
            margin: 4px 0;
            border-radius: 4px;
            background-color: $bg-primary;
            box-shadow: 1px 1px 1px rgb(202,187,188);
        }
    }
}
.paper-head, .paper-body, .paper-foot{
    padding: 20px;
}
.paper-head{
    text-align: center;
    background-color: #F6F6F6;
}
.table-container{
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid $border-gray;
    .table{
        margin-bottom: 0;
    }
}
.table-theme{
    width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
    overflow: hidden;
    tr{
        width: 99%;
        border: 1px solid $border-gray;
    }
    th{
        color: #fff;
        background-color: $color-primary;
    }
}
.text-warning{
    color: #ECA900;
}